// src/pages/CreateVM/CreateVMWizard.tsx
import React, { useState } from 'react';
import { Steps, Card, Button, Space, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import Step1Basic from './Step1Basic';
import Step2Resources from './Step2Resources';
import Step3Storage from './Step3Storage';
import Step4Network from './Step4Network';
import Step5Review from './Step5Review';
import { domainsApi } from '../../api/domains';

export interface VMConfig {
  name: string;
  description: string;
  osType: string;
  vcpus: number;
  memory: number; // MB
  maxMemory: number;
  diskSize: number; // GB
  diskPath: string;
  storagePool: string;
  networkType: 'default' | 'bridge' | 'nat';
  networkInterface?: string;
  autostart: boolean;
}

const CreateVMWizard: React.FC = () => {
  const navigate = useNavigate();
  const [current, setCurrent] = useState(0);
  const [loading, setLoading] = useState(false);
  const [config, setConfig] = useState<VMConfig>({
    name: '',
    description: '',
    osType: 'linux',
    vcpus: 2,
    memory: 2048,
    maxMemory: 4096,
    diskSize: 20,
    diskPath: '',
    storagePool: 'default',
    networkType: 'default',
    autostart: false,
  });

  const updateConfig = (updates: Partial<VMConfig>) => {
    setConfig((prev) => ({ ...prev, ...updates }));
  };

  const steps = [
    {
      title: '基本信息',
      content: <Step1Basic config={config} updateConfig={updateConfig} />,
    },
    {
      title: '资源配置',
      content: <Step2Resources config={config} updateConfig={updateConfig} />,
    },
    {
      title: '存储',
      content: <Step3Storage config={config} updateConfig={updateConfig} />,
    },
    {
      title: '网络',
      content: <Step4Network config={config} updateConfig={updateConfig} />,
    },
    {
      title: '确认',
      content: <Step5Review config={config} />,
    },
  ];

  const next = () => {
    // 验证当前步骤
    if (current === 0 && !config.name) {
      message.error('请输入虚拟机名称');
      return;
    }
    setCurrent(current + 1);
  };

  const prev = () => {
    setCurrent(current - 1);
  };

  const handleCreate = async () => {
    setLoading(true);
    try {
      // 构建虚拟机配置
      const domainConfig = {
        name: config.name,
        description: config.description,
        vcpus: config.vcpus,
        memory: config.memory,
        max_memory: config.maxMemory,
        os_type: config.osType,
        autostart: config.autostart,
        disks: [
          {
            size: config.diskSize,
            pool: config.storagePool,
            path: config.diskPath,
          },
        ],
        networks: [
          {
            type: config.networkType,
            interface: config.networkInterface,
          },
        ],
      };

      await domainsApi.create(domainConfig);
      message.success('虚拟机创建成功！');
      navigate('/');
    } catch (error: any) {
      message.error(`创建失败: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ padding: '24px', maxWidth: '1000px', margin: '0 auto' }}>
      <Card title="创建新虚拟机">
        <Steps current={current} items={steps} style={{ marginBottom: '32px' }} />
        
        <div style={{ minHeight: '400px', marginBottom: '24px' }}>
          {steps[current].content}
        </div>

        <div style={{ textAlign: 'right' }}>
          <Space>
            <Button onClick={() => navigate('/')}>取消</Button>
            {current > 0 && (
              <Button onClick={prev}>上一步</Button>
            )}
            {current < steps.length - 1 && (
              <Button type="primary" onClick={next}>
                下一步
              </Button>
            )}
            {current === steps.length - 1 && (
              <Button type="primary" loading={loading} onClick={handleCreate}>
                创建虚拟机
              </Button>
            )}
          </Space>
        </div>
      </Card>
    </div>
  );
};

export default CreateVMWizard;




